<template>
  <van-tabbar
    active-color="#ec2c2c"
    v-model="active"
    fixed
    :placeholder="true"
  >
    <van-tabbar-item
      v-for="(item, index) in tabbarData"
      :key="index"
      :icon="item.icon"
      @click="goPath(item)"
    >
      {{ item.title }}
    </van-tabbar-item>
  </van-tabbar>
</template>

<script>
import { ref, reactive, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'

export default {
  name: 'Tabbar',
  setup() {
    const active = ref(0)
    const route = useRoute()
    const router = useRouter()
    const tabbarData = reactive([
      {
        icon: 'shop-collect-o',
        title: '预定订单',
        path: '/home',
      },
      {
        icon: 'balance-list-o',
        title: '订单记录',
        path: '/order',
        paths: ['/order/list', '/order/login', '/order/detail']
      }
    ])
    const goPath = (item) => {
      router.push({
        path: item.path,
        query: {channel: localStorage.getItem('channelId') || ''}
      })
    }

    watch(() => route.path, (newVal) => {
      console.log(newVal)
      const index = tabbarData.findIndex(item => {
        return item.path == newVal || (item.paths && item.paths.includes(newVal))
      })
      active.value = index
    }, {immediate: true})
    return {
      active,
      tabbarData,
      goPath
    }
  }
}
</script>

<style>

</style>
